<!--
 * @Description: 条件配置
 * @Author: wangwangwang
 * @Date: 2020-07-23 09:33:47
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-03-25 18:38:08
--> 
<template>
	<el-dialog v-dialogDrag :visible.sync="conditionVisible" width="70%" :before-close="handleClose">
		<span slot="title">设置条件</span>
		<div class="dialoginfo" style="border:0">
			<div>
				<div style="padding-bottom: 10px;">
					<el-button size="mini" class="bottom_all" style="margin-left: 0;" @click="addItemData()">
						<i class="icon iconfont iconicon_button_add" style="font-size: 12px;"></i>
						添加
					</el-button>
					<div style="float:right;">
						<el-select v-model="priorityNo" placeholder="请选择">
							<el-option v-for="item in conditions" :key="item" :label="`优先级${item}`" :value="item+1"></el-option>
						</el-select>
					</div>
				</div>
				<el-table :data="dialogTable" style="width: 100%">
					<el-table-column align="center" label="条件">
						<template slot-scope="scope">
							<el-select v-model="scope.row.conditionKeyCode" placeholder="请选择" @change="scope.row.conditionValue='',scope.row.arr=[], changeCondition(scope.row.conditionKeyCode, scope.$index)">
								<el-option v-for="item in newtableData" :key="item.code" :label="item.name" :value="item.code"></el-option>
							</el-select>
						</template>
					</el-table-column>
					<el-table-column align="center" label="类型">
						<template slot-scope="scope">
							<el-select v-model="scope.row.conditionTypeCode" placeholder="请选择">
								<el-option label="等于" value="0"></el-option>
								<el-option label="不等于" value="1"></el-option>
								<el-option label="大于" value="2"></el-option>
								<el-option label="大于等于" value="3"></el-option>
								<el-option label="小于" value="4"></el-option>
								<el-option label="小于等于" value="5"></el-option>
								<el-option label="in" value="in"></el-option>
							</el-select>
						</template>
					</el-table-column>
					<el-table-column align="center" label="条件值">
						<template slot-scope="scope">
							<el-select v-if="scope.row.conditionKeyCode=='submiterRole'" v-model="scope.row.arr" placeholder="请选择角色" filterable multiple @change="change1(scope.row)">
								<el-option v-for="item in rolelist" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
							<el-cascader v-else-if="scope.row.conditionKeyCode=='submiterOrganization'" v-model="scope.row.arr" :show-all-levels="false" :options="organizationlist" :props="props" filterable @change="change1(scope.row)"></el-cascader>
							<el-select v-else-if="scope.row.type==2" v-model="scope.row.arr" placeholder="请选择角色" filterable multiple @change="change1(scope.row)">
								<el-option v-for="item in scope.row.arryList" :key="item.id" :label="item.itemName" :value="item.itemValue">
								</el-option>
							</el-select>
							<el-input v-else v-model="scope.row.conditionValue"></el-input>
						</template>
					</el-table-column>
					<el-table-column align="center" width="100">
						<template slot-scope="scope">
							<el-button size="mini" class="bottom_two" @click="deleteTable(scope.$index)">
								<i class="icon iconfont iconicon_button_delete" style="font-size: 12px;"></i>
								删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button class="bottom_all_two" size="medium" @click="handleClose">取 消</el-button>
			<el-button class="bottom_all" size="medium" @click="sureSubmit">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
import { queryPage as queryrolePage } from '@/api/basedata/role.js';
import { formatTreeData } from '@/utils/utils'
import { queryPage as queryorganPage } from '@/api/basedata/organization.js';
import { getDicType } from '@/api/common';
export default {
	props: ["conditionVisible", "tableData", 'conditionTable', 'conditions', 'conditionData'],
	data() {
		return {
			dialogTable: [],
			priorityNo: '',
			newtableData: [],
			rolelist: [],
			organizationlist: [],
			props: {
				children: 'children',
				label: 'name',
				multiple: true,
				checkStrictly: true,
				value: 'id',
			}
		};
	},
	watch: {
		conditionVisible(newVal) {
			if (newVal) {
				this.dialogTable = this.conditionTable || [];
				this.priorityNo = this.conditionData.priorityNo+1;
			}
		},
	},
	created() {
		let objArr = [{ name: "发起人角色", id: 1, code: 'submiterRole', arr: [] }, { name: "发起人组织", id: 2, code: 'submiterOrganization', arr: [] }]
		this.newtableData = [...objArr, ...this.tableData]
		const params = {
			page: 1,
			pageSize: 10000,
		}
		queryrolePage({
			...params,
			roleEentrance: 'entrance_manager',
			enable: 1
		}).then(res => {
			this.rolelist = JSON.parse(JSON.stringify(res.data.data))
		})
		queryorganPage({
			...params,
			showEnable: 0
		}).then(res => {
			if (res.code === 1001) {
				const {
					data
				} = res.data;
				this.organizationlist = formatTreeData(data, 'id', 'parentId', 'children', 'parent_id');
			}
		})
	},
	methods: {
		changeCondition (value, index) {
			/**
			 * @Description: 判断是否是数据字典
			 * @param {*}
			 * @Author: wangwangwang
			 */	
			const choiseConditions = this.newtableData.find(item => item.code === value);
			if (choiseConditions.dataSource === 1) {
				const params = {
					code: choiseConditions.dataSourceValues,
				}
				getDicType(params).then(res => {
					if (res.code === 1001) {
						this.dialogTable[index].arryList = res.data.items;
						this.dialogTable[index].type = 2;
					}
				})
			}
		},
		addItemData() {
			const data = {
				conditionKeyCode: '',
				conditionTypeCode: '',
				conditionValue: '',
				arr: [],
				arryList: [],
				type: '',
			};
			this.dialogTable.push(data);
		},
		deleteTable(index) {
			this.dialogTable.splice(index, 1);
		},
		handleClose() {
			this.$emit('closeVisible');
		},
		change1(low) {
			low.conditionValue = low.arr.join(',');
			this.$forceUpdate();
		},
		sureSubmit() {
			if (!this.dialogTable.length) {
				this.$message.warning('条件不能为空');
				return
			}
			this.$emit('sendCondition', this.dialogTable, this.priorityNo - 1);
		}
	},
	mounted() {
		if (this.conditionTable) {
			this.dialogTable = this.conditionTable;
		} else {
			this.dialogTable = [];
		}
	}
};
</script>
<style lang="scss" src="./../newflows.scss" scoped></style>
<style scoped>
.dialoginfo {
  padding: 0;
  border: 1px #e1e5ed solid;
}
</style>
